<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 合同领用
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-add"
                    class="handle-del mr10"
                    @click="handleEdit('add')"
                >合同录入</el-button>
<!--                时间段、指定年月、合同类型、律师姓名查询合同领用记录（含注销的合同）-->
                    <el-date-picker
                        v-model="query.datePink"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @blur="handleBlur">
                    </el-date-picker>

                <el-select v-model="query.contractType" placeholder="合同类别" class="handle-select mr10" style='width: 130px'>
                    <el-option key="" label="请选择" value=""></el-option>
                    <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
                    <el-option key="2" label="民事案件" value="民事案件"></el-option>
                    <el-option key="3" label="行政案件" value="行政案件"></el-option>
                    <el-option key="4" label="经济案件" value="经济案件"></el-option>
                </el-select>

                <el-input v-model="query.lawyerName" placeholder="律师姓名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <template>
                    <download-excel
                        class="export-excel-wrapper"
                        :data="this.tableData"
                        :header="title"
                        name="合同信息.xls"
                    >
                        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                        <el-button type="success">导出</el-button>
                    </download-excel>
                </template>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="70" align="center"></el-table-column>
                <el-table-column prop="contractId" label="合同编号" align="center"></el-table-column>
                <el-table-column prop="contractName" label="合同名称"></el-table-column>
                <el-table-column prop="contractType" label="合同类型"></el-table-column>
                <el-table-column prop="contractAmount" label="合同金额"></el-table-column>
                <el-table-column prop="lawyerName" label="律师姓名"></el-table-column>
                <el-table-column prop="claimDate" label="领用日期"></el-table-column>
                <el-table-column prop="operator" label="经办人"></el-table-column>

                <el-table-column label="合同状态">
                    <template slot-scope="scope" >
                        <el-switch
                            disabled=true
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#909399" @change='chanActive(scope.row)'>
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="合同操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit('edit', scope.row)"
                        >编辑</el-button>

                        <el-button
                            :disabled='!scope.row.status'
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >注销</el-button>
                    </template>
                </el-table-column>

            </el-table>


            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-form-item label="合同编号" prop='contractId'>
                    <el-input v-model="form.contractId"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop='contractName'>
                    <el-input v-model="form.contractName"></el-input>
                </el-form-item>
                <el-form-item label="合同类型 " prop='contractType'>
                    <el-select v-model="form.contractType" >
                        <el-option key="0" label="请选择" value=""></el-option>
                        <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
                        <el-option key="2" label="民事案件" value="民事案件"></el-option>
                        <el-option key="3" label="行政案件" value="行政案件"></el-option>
                        <el-option key="4" label="经济案件" value="经济案件"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同金额" prop='contractAmount'>
                    <el-input v-model="form.contractAmount"></el-input>
                </el-form-item>
                <el-form-item label="律师姓名" prop='lawyerName'>
                    <el-input v-model="form.lawyerName"></el-input>
                </el-form-item>
                <el-form-item label="经办人" >
                    <el-input v-model='form.operator' :disabled=true></el-input>
                </el-form-item>
                <el-form-item label="领用日期" prop='claimDate'>
                <el-date-picker
                    v-model="form.claimDate"
                    value-format='yyyy-MM-dd'
                    placeholder="选择日期">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="状态" prop='status'>
                    <el-input v-model="form.status"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop='remarks'>
                    <el-input v-model="form.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

<!--        注销弹出框-->
        <el-dialog title="注销信息" :visible.sync="dialogFormVisible" width='280px'>
            <el-form :model="form">
                <el-form-item label="注销原因"   prop='cancellationReason'>
                    <el-input v-model="form.cancellationReason" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="cancel(form)">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
let user = JSON.parse(localStorage.getItem('ms_username'));
import { getContractsByCondition } from "../../api/contract";
import {changeContractActive} from "../../api/contract"
import {editContract} from "../../api/contract"
import { addContract } from '../../api/contract';
import { delContract } from '../../api/contract';
export default {
    name: 'ContractOne',
    data() {
        return {
            date:"",
            cancelOrNo:"",

            claimDate:'',
            cancellationDate:'',
            /*条件查询*/
            query: {
                datePink: [],
                contractType:"",
                lawyerName:"",
                beginTime:'',
                endTime:'',
                page: 1,
                pageSize: 10
            },


            tableData: [],//查询的表格数据
            pageTotal: 0,//总条数



            multipleSelection: [],//复选框选中的数据
            delList: [], //批量删除的ids


            dialogFormVisible:false,
            editVisible: false, //对话框显示不显示
            form: {
                cancellationReason:"",
                remarks:"",
                lawyerName:"",
                contractType:"",
                contractId:"",
                contractName:"",


                operator:user.userName,
            },//提交表单后数据放在form里，添加或修改的表单数据

            title:"编辑",
            roles:[],


            rules:{
                contractId: [
                    { required: true, message: '合同编号不能为空', trigger: 'blur' }
                ],
                contractName: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                contractType: [
                    { required: true, message: '请选择合同类型', trigger: 'change' }
                ],
                contractAmount: [
                    { required: true, message: '合同金额不能为空', trigger: 'blur' },
                    { pattern: /^\d+$/, message: '合同金额必须为数字', trigger: 'blur' }
                ],
                lawyerName: [
                    { required: true, message: '律师姓名不能为空', trigger: 'blur' }
                ],
                // claimDate: [
                //     { required: true, message: '领用日期不能为空', trigger: 'blur' }
                // ],
                status: [
                    { required: true, message: '状态不能为空', trigger: 'blur' }
                ],
                remarks: [
                    { required: false } // 备注可以为空
                ],
                cancellationReason:[
                    {required: true, message: '原因不能为空', trigger: 'blur'}
                ]
            },
            idx: -1,//弹框时告诉修改/删除第几行
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        handleBlur() {
            this.$refs.datePicker.popperVisible = false;
        },
        //改变启用状态
        chanActive(val){
            changeContractActive(val).then(res=>{
                if(res.code==200) {
                    if(val.status==true){
                        this.$message.success("合同已启用")
                    }else{
                        this.$message.info("合同已注销")
                    }
                }
                else{
                    this.$message.error("启用/禁用失败,稍后再试")
                }
            })
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            if(this.query.datePink!=null){
                this.query.beginTime = this.query.datePink[0]
                this.query.endTime = this.query.datePink[1]
                this.query.datePink=null;
            }

            getContractsByCondition(this.query).then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.tableData = res.data;
                    this.pageTotal = res.pageTotal || 50;
                }
                else {
                    this.$message.error(res.msg);
                }
               this.query.datePink =[];

            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 注销操作
        handleDelete(index,row) {
            this.query.datePink=null;
            this.form = {...row}
            this.dialogFormVisible=true


        },
        cancel(form){
            delContract(form).then((res) => {
                if(res.code==200){
                    this.$message.success('注销成功');
                    this.dialogFormVisible=false;
                    this.getData();
                }
                else{
                    this.$message.error('注销失败');
                }
            })
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 编辑操作
        handleEdit(ope, row) {
            if(ope === 'edit') {
                this.title = "编辑";
                this.form = { ...row };
            }else if(ope==='add'){
                this.title = "添加"
                this.form={}
                this.form.operator=user.userName;
            }

            this.editVisible = true;


        },
        // 保存编辑
        saveEdit() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    if(this.title == '编辑') {
                        editContract(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("修改成功")
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("修改失败")
                            }

                        })
                    }else{//添加
                        addContract(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("添加成功")
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("添加失败")
                            }
                        })
                    }
                }else{
                    this.$message.error('请输入正确的信息')
                    return false;
                }
            })
            // this.editVisible = false;
            // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            // this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.export-excel-wrapper{
    display: inline-block;
    margin-left: 5px;
}
</style>
